﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #url_src {
            width: 400px;
        }

        #text_container {
            margin: 0px;
            height: 477px;
            width: 538px;
        }
    </style>
</head>
<body>
    <div>
        输入 API_url:<input type="text" id="url_src" /> <input type="button" value="获取" id="btn_get" />
        <br />
        <textarea id="text_container"></textarea>
    </div>
    <script src="Socker_Helper.js"></script>
    <script>

        //-----Rest API--start---//
        document.getElementById("url_src").value = "https://www.okex.com/api/v1/future_ticker.do?symbol=btc_usd&contract_type=this_week";
        function ajax_method(url, data, method, success) {
            // 异步对象
            var ajax = new XMLHttpRequest();

            // get 跟post  需要分别写不同的代码
            if (method == 'get') {
                // get请求
                if (data) {
                    // 如果有值
                    url += '?';
                    url += data;
                } else {

                }
                // 设置 方法 以及 url
                ajax.open(method, url);

                // send即可
                ajax.send();
            } else {
                // post请求
                // post请求 url 是不需要改变
                ajax.open(method, url);

                // 需要设置请求报文
                ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                // 判断data send发送数据
                if (data) {
                    // 如果有值 从send发送
                    ajax.send(data);
                } else {
                    // 木有值 直接发送即可
                    ajax.send();
                }
            }

            // 注册事件
            ajax.onreadystatechange = function () {
                // 在事件中 获取数据 并修改界面显示
                if (ajax.readyState == 4 && ajax.status == 200) {
                    // console.log(ajax.responseText);

                    // 将 数据 让 外面可以使用
                    // return ajax.responseText;

                    // 当 onreadystatechange 调用时 说明 数据回来了
                    // ajax.responseText;

                    // 如果说 外面可以传入一个 function 作为参数 success
                    success(ajax.responseText);
                }
            }

        }

        var btn = document.getElementById("btn_get");
        btn.onclick = function () {
            var url = document.getElementById("url_src").value;
            //console.log(arr);
            ajax_method(url, "", "get", Success);
            //alert(url);
            //$.ajax({
            //    url: url,
            //    data: "",
            //    type: "GET",
            //    dataType: "jsonp",
            //    success: function (a, b) {
            //        console.log(a+":"+b)
            //    }
            //});
        };

        function Success(data) {
           // console.log(data);
            document.getElementById("text_container").innerText = JSON.stringify(JSON.parse(data).data, null, 2);//JSON.stringify(data, null, 2);
        }

        //-----web socket---//
        var OKEx = {};
        OKEx.ticker = function () {
            var sockerUrl = "wss://real.okex.com:10441/websocket";//WebSocket服务连接地址
            var json = { 'event': 'addChannel', 'channel': 'ok_sub_spot_bch_btc_ticker' };
            //var sockerUrl = "wss://stream.binance.com:9443/ws/bnbbtc@ticker";//WebSocket服务连接地址
            //var json = { 'event': 'addChannel', 'channel': 'ok_sub_spot_usd_btc_ticker' };
            //var json = { 'event': 'addChannel', 'channel': 'ok_sub_futureusd_btc_ticker_this_week' }
            Socket(json, sockerUrl, ticker);
        }
        OKEx.ticker();
    </script>
</body>
</html>